<template>
  <div class="main" v-title data-title="产品生命周期首页">
    <home-nav :userData="userinfo"></home-nav>
    <div class="navCenter">
      <div class="info-title">产品生命周期</div>
      <div class="nav-choose">
        <div class="selected-box" v-for="item in controlStripArr" :key="item.title">
          <div class="selected-content" @click="handleGo(item.hteUrl)">
            <div class="icon">
              <div class="img-content">
                <img :src="item.url" />
              </div>
            </div>
            <p>{{ item.title }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
export default {
  components: {
    HomeNav: () => import('@/components/layouts/HomeNav'),
  },
  data() {
    return {
      controlStripArr: [
        {
          url: require('@/assets/productCycle/techProject.png'),
          title: '研发项目报表专区',
          hteUrl: '/productTech',
        },
        {
          url: require('@/assets/productCycle/cost.png'),
          title: '成本核算专区',
          hteUrl: '',
        },
        {
          url: require('@/assets/productCycle/label.png'),
          title: '标签管理',
          hteUrl: '',
        },
        {
          url: require('@/assets/productCycle/techProcess.png'),
          title: '研发类申请流程',
          hteUrl: '',
        },
         
      ],
      userinfo: {
        info: this.$store.getters.userInfo,
        module: 'ProductIndex',
      },
    }
  },
  methods: {
    handleGo(hteUrl) {
      if (hteUrl) {
        let urlJump = this.$router.resolve({ path: `${hteUrl}` })
        window.open(urlJump.href, '_blank')
      } else {
        this.$message.info('该栏目正在火热建设中，敬请期待')
      }
    },
  },
}
</script>

<style lang="less" scoped>
.main {
  width: 100%;
  height: 100%;
  background: url('../../assets/productCycle/indexBag.png') no-repeat;  
  background-size: 100% auto;
  background-position: center;
  background-color: #478ee6;
  font-size: 12px;
  .navCenter {
    position: absolute;
    top: 25%;
    left: 55%;
    .info-title {      
      font-size: 72px;      
      color: #ffffff;      
      text-shadow: 5px 6px 5px #3362bd;
      letter-spacing: 4px;  
    }
    .nav-choose {
      display: flex;      
      flex-wrap: wrap;
      width: 44.5vw;
      max-width: 793px;
      margin-top: 30px;
      .selected-box {
        margin-right: 16px;
        margin-bottom: 25px;
        .selected-content {
          width: 14vw;
          min-width: 253px;
          padding: 10px;
          background-color: #3362bd;
          display: flex;
          align-items: center;
          box-shadow: -1px 6px 6px 0px rgba(5, 90, 195, 0.36);
          border-radius: 8px;
          cursor: pointer;
          transition: top .3s;
          position: relative;
          .icon {
            width: 72px;
            height: 72px;
            margin: 5px 20px 5px 10px;
            .img-content {
              width: 100%;
              height: 100%;
              background-color: #ffffff;
              border-radius: 70%;
              img {
                margin: 19px 0px 0px 19px;
                width: 34px;
              }
            }
          }
          p {
            font-size: 15px;
            margin-bottom: 0;
            color: #ffffff;
          }
          &:hover {            
            top: -8px;            
          }
        }  
        // 图片大小不一致特殊处理
        &:first-of-type{
          .selected-content .icon .img-content img{
            margin-top: 24px;
          }
        }      
      }
    }
  }
}
@media only screen and (max-width: 1500px) {
  .main .navCenter .info-title {
    font-size: 67px;
  }
}
@media only screen and (max-width: 1200px) {
  .main{
    background-size: 121% auto;
  }
  .main .navCenter .nav-choose .selected-box {
    .selected-content {
      padding: 5px;
      min-width: 207px;
      .icon{
        width: 52px;
        height: 52px;
        margin: 10px;
        .img-content img{margin: 14px 0px 0px 14px;width: 24px;}
      }
    }
    &:first-of-type .selected-content .icon .img-content img{margin-top: 17px;}
  }  
}
@media only screen and (max-width: 1060px) {
  .main .navCenter{left: 50%;
    .nav-choose{min-width: 49.5vw}
  }  
}
@media only screen and (max-width: 970px) {
  .main .navCenter .info-title {
    font-size: 60px;
  }
  .main .navCenter .nav-choose .selected-box .selected-content {
    min-width: 400px;
  }
}
</style>